<template>
  <my-div class="transfer">
     <head @rightClick="go_record">
       <div slot="right" >
         <div >
            <image style="width: 36px;height: 36px" src="root:img/wallet/lishijilu@2x.png"></image>
         </div>
        </div>
     </head>
    <scroller :show-scrollbar="false">
      <div class="transfer-choose">
        <my-text  day_color="rgba(70,120,245,1)" :text="$t('wallet.coin')" night_color="rgba(184,111,36,1)" class="transfer-title"></my-text>
        <div class="choose-currency">
          <text class="currency-name">{{current_wallet_type}}</text>
          <div class="currency-wrapper"  @click='is_bottom_show'>
            <text class="choose-label">{{$t('wallet.choose_type')}}</text>
            <image style="width:18px;height:32px;margin-left:14px;" src="root:img/home/right@2x.png"></image>
          </div>
        </div>
      </div>
      <div class="address-wrapper">
        <div class="wrapper">
          <text class="font24 address-label1">{{$t('wallet.coin_address')}}</text>
          <!-- <text class="font24 address-label2">({{$t('wallet.bitcoin')}})</text> -->
        </div>
        <div class="address-inter">
           <input :color='inputText.color'  type="text" :placeholder="$t('wallet.inputadress')" class="address-input" v-model="form.accountId" />
          <image class="address-scan" @click="scan" src="root:img/day/wallet/saoma@2x.png"></image>
        </div>

        <div class="wrapper" style="margin-top:108px;">
          <text class="font24 address-label1">{{$t('wallet.number')}}</text>
        </div>
        <div class="address-inter">
           <input :color='inputText.color' @input="get_fee" type="number" :placeholder="$t('wallet.minNum')+result.transferOutMin" class="address-input" v-model="form.num" />
           <text class="address-range">{{current_wallet_type}} | </text>
           <text class="address-all" @click="check_user_havemoney">{{$t('wallet.all')}}</text>
        </div>

         <div class="wrapper" style="margin-top:108px;">
          <text class="font24 address-label1">{{$t('wallet.hand_money')}}</text>
            <text class="address-label2">(费率：{{result.transferFeeRatio}})</text>
        </div>
        <div class="address-inter">
            <text style="color:rgba(60,71,98,1);font-size:28px;" >{{form.finaleFee || ''}}</text>
           <text class="address-all">{{current_wallet_type}}</text>
        </div>
        <my-div day_bg="rgba(245,246,249,1)" class="address-attention" v-if="attention.length>0">
            <text class="transfer-attention" v-for="(content,key) of attention" :key="key">{{content}}</text>
        </my-div>
        <div class="address-sum">
          <text class="sum-text">{{$t('wallet.have_money') }}</text>
          <text class="sum-text">{{form.finalAmount}} {{current_wallet_type}}</text>
        </div>
        <div class="vent-btn" @click="turn_out">
          <text style="color:#ffffff;text-align:center;line-height:80px;font-size:28px;">{{$t('wallet.coin')}}</text>
        </div>
      </div>

    </scroller>
    <sure-password ref='sure_pw' @success="sure_success"></sure-password>
  </my-div>
</template>

<script>
import { WxcRadio } from 'weex-ui';
import SurePassword from '../../component/sure_password.vue';
const qr = weex.requireModule('qr')
export default {
  name: '',
  data() {
    return {
      wallet_types:[],
      current_wallet_type:'',
      result:{},
      config:{
         checkedColor: 'rgba(60,71,98,1)'
      },
      form:{
        accountId:'',
        num:'',
        finaleFee:'',
        finalAmount:''
      },
      balance:'',
      attention:['加载中...']
    }
  },
  components: {WxcRadio,SurePassword},
  methods: {
    onLoad(param){
      if(!param) return
      this.get_attention()
      this.current_wallet_type = param.data.name
      this.result = param.data
      const wallet_types = param.wallet_types
      wallet_types.forEach(item => {
           this.wallet_types.push({
             title:item.name,
             value:item.name
           })
        });
    },
     wxcRadioListChecked(e){
      this.current_wallet_type = e.value
    },
    get_attention(){
      this.$http.getSilent('index/tradenote',{tradeType:5},(res)=>{
        this.attention = []
        const content1 = res.returnObject.content1
        const content2 = res.returnObject.content2
        const content3 = res.returnObject.content3
        const content4 = res.returnObject.content4
        const content5 = res.returnObject.content5
        if(content1) this.attention.push(content1)
        if(content2) this.attention.push(content2)
        if(content3) this.attention.push(content3)
        if(content4) this.attention.push(content4)
        if(content5) this.attention.push(content5)
      })
    },
    is_bottom_show(){
      this.navigator.presentFull({url:'root:pages/wallet/search_wallet.js',animate:true},(p)=>{
        if(!p) return false
        this.result = p.data
        this.get_fee()
        this.current_wallet_type = p.data.name
      })
    },
    // 查询用户账户余额
    check_user_havemoney(){
      this.$http.get('wallet/getUserAmount',{accountId:this.current_wallet.account_id,name: this.current_wallet_type},(res)=>{
        this.balance = res.result
        this.form.num = this.balance

      })
    },
    // 获取手续费和 到账数量
    get_fee(){
      // 计算手续费
      if(this.form.num < this.result.transferOutMin) {
        this.form.finalAmount = ''
        this.form.finaleFee = ''
        return false
      }
      const fee = (this.form.num * this.result.transferFeeRatio).toFixed(8)
      fee < this.result.transferFeeMin ? this.form.finaleFee = this.result.transferFeeMin : this.form.finaleFee = fee
      this.form.finalAmount = (this.form.num - this.form.finaleFee).toFixed(8)
    },
    // 扫码
    scan(){
      var p={};
      p.color='#000000'
      p.bgcolor='#ffffff'
      qr.open(p,(res)=>{
        const sign = res&&res.split(':')[0] || ''
        if(sign != '123') return this.toast('二维码内容错误')
        const key = res&&res.split(':')[1] || ''
        if(this.current_wallet_type !== key) return this.toast(`请选择${key}币种转出`)
        const btcAddress = res&&res.split(':')[2]
        this.form.accountId = btcAddress
      })
    },
    // 获取主钱包地址 
    get_main_wallet_address(btcAddress){
      this.$http.getSilent('wallet/getAxcAddressFromBTC',{btcAddress:btcAddress},(res)=>{
        this.form.accountId = res.address
      })
    },
    sure_success(){
        if(this.form.num < this.result.transferOutMin) return this.toast(this.$t('wallet.minNum')+this.result.transferOutMin)
        const p = {
              master_seed:this.current_wallet.master_seed,
              transferInAddress:this.form.accountId,
              currency:this.current_wallet_type,
              amount:this.form.num
              }
          this.$http.post('wallet/transferOut',p,(res)=>{
            this.toast(this.$t('common.coin_success'))
            this.push('root:pages/wallet/coin_result.js',{result:res,type:'result'})
          })
    },
    turn_out(){
      if(this.form.num == 0) return this.toast('请输入交易数量')
         this.$refs.sure_pw.show = true
    },
    go_record(){
      this.push('root:pages/wallet/coin_record.js',{wallet:{name:this.current_wallet_type}})
    }
  }
}
</script>
<style scoped>
.wrapper{
  display: flex;
  flex-direction: row;
}
.wraper-rate{
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: start;
}
.transfer-choose{
  width: 720px;
  padding-left: 30px;
  height: 246px;
}
.transfer-title{
  margin-top: 24px;
  font-size: 48px;
  font-family: PingFang SC;
  margin-bottom: 40px;
}
.choose-currency{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 690px;
  height: 90px;
  border-radius: 10px;
  background-color: rgba(245,246,249,1);
}
.currency-name{
  font-size: 30px;
  font-family: PingFang SC;
  color: rgba(60,71,98,1);
  margin-left: 20px;
}
.currency-wrapper{
  display: flex;
  flex-direction: row;
  margin-right: 20px;
}
.choose-label{
  font-size: 24px;
  font-family: PingFang SC;
  color: rgba(60,71,98,1);
}
.address-wrapper{
  width: 690px;
  margin-left: 30px;
  margin-top: 78px;
}
.font24{
  font-size: 24px;
}
.address-label1{
  color: rgba(60,71,98,1);
}
.address-label2{
  margin-left: 16px;
  color: rgba(154,156,164,1);
}
.address-inter{
  /* margin-top: 24px; */
  height: 90px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(233,233,233);

}
.address-scan{
  width: 30px;
  height: 28px;
  position: absolute;
  right: 0;
  font-size: 28px;
}
.address-all{
  position: absolute;
  right: 0;
  font-size: 28px;
  color: rgba(60,71,98,1);
}
.address-range{
  position: absolute;
  right: 54px;
  color: rgb(154,156,164);
  font-size: 28px;
}
.address-input{
  width: 620px;
  height: 90px;
  font-size: 28px;
}
.address-attention{
  width: 690px;
  height: 238px;
  opacity: 1;
  padding-left: 26px;
  padding-top: 38px;
  padding-right: 26px;
  margin-top: 84px;
}
.transfer-attention{
  font-size: 20px;
  font-family: PingFang SC;
  color: rgba(154,156,164,1);
  line-height: 36px;
  lines:5;
}
.address-sum{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 84px;
}
.sum-text{
  font-size: 36px;
  font-family: PingFang SC;
  color: rgba(60,71,98,1);
  line-height: 36px;
}
.vent-btn{
  width: 690px;
  height: 80px;
  opacity: 1;
  background-color: rgba(70,120,245,1);
  border-radius: 10px;
  margin-top: 28px;
  margin-bottom: 30px;
}
</style>
